<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>自定义视频播放器</title>

	<style type="text/css">
		html {
			box-sizing: border-box;
		}


		*,*:before,*:after {
			box-sizing: inherit;
		}

		body {
			margin: 0;
			padding: 0;
			display: flex;
			min-height: 100vh;
			background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%);
			background-size: cover;
			align-items: center;
			justify-content: center;
		}

		.player {
			max-width: 750px;
			border: 5px solid rgba(255, 0, 0, 0.2);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
			position: relative;
			font-size: 0;
			overflow: hidden;
		}

		.player:fullscreen {
			max-width: none;
			width: 100%;
		}

		.player:-webkit-full-screen {
			max-width: none;
			width: 100%;
		}

		.player__video {
			width: 100%;
		}

		.player__button {
			background: none;
			/*border: 1px solid black;*/
			border: 0;
			line-height: 1;
			color: white;
			text-align: center;
			/*outline: 1px solid black;*/
			padding: 0;
			cursor: pointer;
			max-width: 50px;
		}

		.player__button:focus {
			border-color: #FFC600;
		}

		/*.player__slider {
			width: 10px;
			height: 20px;
		}*/

		.player__controls {
			display: flex;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50px;
			transform: translateY(100%) translateY(-5px);
			transition: all .3s;
			flex-wrap: wrap;
			background: rgba(0,0,0,0.1);
		}

		.player:hover .player__controls {
			transform: translateY(0);
		}

		.player:hover .progress {
			height: 15px;
		}

		.player__controls > * {
			flex: 1;
		}

		.progress {
			flex: 10;
			position: relative;
			display: flex;
			flex-basis: 100%;
			height: 5px;
			transition: height 0.3s;
			background: rgba(0,0,0,0.5);
			cursor: ew-resize;
		}

		.progress__filled {
			width: 50%;
			background: #FFC600;
			flex: 0;
			flex-basis: 0%;
		}

		input[type=range] {
			-webkit-appearance: none;
			background: transparent;
			width: 100%;
			margin: 0 5px;
		}

		input[type=range]:focus {
			outline: none;
		}

		input[type=range]::-webkit-slider-runnable-track {
			width: 100%;
			height: 8.4px;
			cursor: pointer;
			box-shadow: 1px 1px 1px rgba(0,0,0,0), 0 0 1px rgba(13,13,13, 0);
			background: rgba(255,255,255,0.8);
			border-radius: 1.3px;
			border: 0.2px solid rgba(1,1,1,0);
		}
		input[type=range]::-webkit-slider-thumb {
			-webkit-appearance: none;
			height: 15px;
			width: 15px;
			border-radius: 50px;
			background: #FFC600;
			cursor: pointer;
			margin-top: -3.5px;
			box-shadow: 0 0 2px rgba(0,0,0,0.2);
		}

		input[type=range]:focus::-webkit-slider-runnable-track {
			background: #bada55;
		}

		/*input[type=range]::-moz-range-track {
			width: 100%;
			height: 8.4px;
			cursor: pointer;
			box-shadow: 1px 1px 1px rgba(0,0,0,0), 0 0 1px rgba(13,13,13,0);
			background: #FFFFFF;
			border-radius: 1.3px;
			border: 0.2px solid rgba(1,1,1,0);
		}*/

		/*input[type=range]::-moz-range-thumb {
			box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(13,13,13,0);
			height: 8.4px;
			width: 8.4px;
			border-radius: 50px;
			background: #FFC600;
			cursor: pointer;
		}*/
	</style>
</head>
<body>
	<div class="player">
		<video class="player__video viewer" src="Shape of You.mp4">
		</video>
		<div class="player__controls">
			<div class="progress">
				<div class="progress__filled"></div>
			</div>
			<button class="player__button toggle" title="Toggle Play">►</button>
			<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1"/>
			<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1"/>
			<button data-skip="-10" class="player__button">« 10s</button>
			<button data-skip="25" class="player__button">25s »</button>
		</div>
	</div>
	<script type="text/javascript">
		const player = document.querySelector('.player');
		const video = player.querySelector('.viewer')
		const progress = player.querySelector('.progress');
		const progressBar = player.querySelector('.progress__filled');
		const toggle = player.querySelector('.toggle');
		const skipButtons = player.querySelectorAll('[data-skip]');
		const ranges = player.querySelectorAll('.player__silder');


		//视频播放与暂停转换函数
		function videoplay () {
			const method = video.paused ? 'play' : 'pause';
			video[method]();
		}

		//播放按钮状态显示函数
		function handleToggle () {
			let icon = video.paused ? '►' : '❚ ❚';
			toggle.textContent = icon;
		}

		//音量大小和播放速度控制函数
		function handlePlayerSlider (e) {
			video[e.target.name] = e.target.target.value;
		}

		//快进快退函数
		function handleSkip (e) {
			let skiptime = parseFloat(this.dataset.skip);
			video.currentTime += skiptime;
		}

		//进度条随播放时间而显示的函数
		function filledUpdate () {
			let percent = parseFloat(video.currentTime / video.duration) * 100;
			progressBar.style.flexBasis = `${percent}%`;
		}

		//拖拽进度条定点观看的函数
		function handlefilled (e) {
			let scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
			video.currentTime = scrubTime;
		}

		//点击播放
		video.addEventListener('click', videoplay);
		//点击或者播放时改变播放器和暂停状态的图表
		video.addEventListener('play', handleToggle);
		//暂停时改变图表状态
		video.addEventListener('pause',handleToggle);
		//时间轴更新
		video.addEventListener('timeupdate', filledUpdate);

		//点击播放或者暂停的图表事件的监听
		toggle.addEventListener('click', videoplay);
		toggle.addEventListener('click', handleToggle);

		//音量和播放速度滑动条事件监听
		let mouseflag = false;
		ranges.forEach(range => range.addEventListener('change', handlePlayerSlider));
		ranges.forEach(range => range.addEventListener('mousemove', mouseflag && handlePlayerSlider));
		ranges.forEach(range => range.addEventListener('mouseup', () => mouseflag = false));
		ranges.forEach(range => range.addEventListener('mousedown'), () => mouseflag = true);
		//快进按钮事件监听
		skipButtons.forEach(button => button.addEventListener('click', handleSkip));

		//播放事件轴拖拽监听
		let filledflag = false;
		progressBar.addEventListener('click', handlefilled);
		progress.addEventListener('mousemove', (e) => filledflag && handlefilled(e));
		progress.addEventListener('mousedown', () => filledflag = true);
		progress.addEventListener('mouseup', () => filledflag = false);


	</script>
</body>
</html>